// pages/goods_detail/goods_detail.js
/*
  1.发送请求获取商品的详情数据
  2.点击轮播图 预览大图
    2.1 给轮播图绑定点击事件
    2.2 调用小程序的api previewImage
  3.加入购物车
    3.1 点击事件
    3.2 获取缓存中的购物车数据 数组格式
    3.3 先判断当前的商品是否已经存在购物车， 从而修改数据，再填充到缓存中
    3.4 不能在于购物车数组中， 直接给购物车数据添加上一个购买属性 num 然后重新填回缓存中
    3.5 弹出相应的提示
*/
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goodsObj: {},
    isCollect:false
  },
  // 商品对象
  GoodsInfo:{},


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    // 设置收藏图片的显示与隐藏
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    let options = currentPage.options;


    const { goods_id } = options
    // console.log(goods_id);
    this.getGoodsDetail(goods_id);


  },

  // onShow:function(){
  //   // this.getGoodsDetail(goods_id);
  // },

  // 获取商品详情数据
  async getGoodsDetail(goods_id) {
    const goodsObj = await request({
      url: "/goods/detail",
      data: {
        goods_id
      }
    });
    // 给商品对象进行赋值
    this.GoodsInfo = goodsObj;
    // console.log(res);
    // 将获取到的数据进行变量赋值

    // 1.获取缓存中商品收藏的数组
    let collect = wx.getStorageSync("collect") || [];
    // 2.判断当前商品是否被收藏
    let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);

    this.setData({
      goodsObj: {
        goods_name: goodsObj.goods_name,
        goods_price: goodsObj.goods_price,
        // iphone 部分手机不识别 webp图片格式
        // 最好找到后台 进行修改  -- 推荐使用的方式
        // 零时修改 确保后台存在 1.webp => 1.jpg
        // 利用正则表达式的方式进行后缀更改  ---  并不推荐使用的方式
        goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
        pics: goodsObj.pics,
      },
      isCollect
    })
  },

  // 点击轮播图放大预览
  handlePreviewImage(e) {
    // console.log(123);
    // 1.先构造要预览的图片数组
    const urls = this.GoodsInfo.pics.map(v => v.pics_mid);
    // 2. 接收传递过来的url
    const current = e.currentTarget.dataset.url;
    wx.previewImage({
      // 因为变量相同可以缩写
      current, // 当前显示图片的http链接
      urls // 需要预览的图片http链接列表
    })
  },

  // 点击 加入购物车
  handleCartAdd() {
    // console.log(123);r
    // 1. 获取缓存中的购物车数组
    let cart = wx.getStorageSync("cart") || [];
    // 2. 判断商品对象是否存在于购物车数组中
    //    查询 购物车数组  中的商品id是否是 已存在的商品id
    let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id );
    // 3. 对商品的存在进行判断
    if( index === -1){
      //4. 不存在 第一次添加
      //  商品数为1时
      this.GoodsInfo.num = 1;
      this.GoodsInfo.checked = true;
      // 添加到购物车数组
      cart.push( this.GoodsInfo);
    }  else {
      //5. 已存在购物车数据 执行 num++  增加商品的数量
      cart[index].num++;
    }
    // 6. 将购物车的数据重新添加到缓存中
    // wx.setStorageSync("cart", cart);
    wx.setStorageSync("cart", cart);
    //7. 弹幕提示信息
    wx.showToast({
      title: '加入成功',
      icon: 'success',
      duration: 1500,
      // true 是为了防止用户一直点击添加
      mask: true,
    }); 
  },



  // 点击 商品收藏图标
  handleCollect(){
    let isCollect=false;
    // 1 获取缓存中的商品收藏数组
    let collect=wx.getStorageSync("collect")||[];
    // 2 判断该商品是否被收藏过
    let index=collect.findIndex(v=>v.goods_id===this.GoodsInfo.goods_id);
    // 3 当index！=-1表示 已经收藏过 
    if(index!==-1){
      // 能找到 已经收藏过了  在数组中删除该商品
      collect.splice(index,1);
      isCollect=false;
      wx.showToast({
        title: '取消成功',
        icon: 'success',
        mask: true
      });
        
    }else{
      // 没有收藏过
      collect.push(this.GoodsInfo);
      isCollect=true;
      wx.showToast({
        title: '收藏成功',
        icon: 'success',
        mask: true
      });
    }
    // 4 把数组存入到缓存中
    wx.setStorageSync("collect", collect);
    // 5 修改data中的属性  isCollect
    this.setData({
      isCollect
    })  
  }


  
})